<!--用户管理-->
<template>
	<div>
		<div class="table">
			<row>
				<div class="divmenu">
					<Col :lg="{span:2}" :md="{span:8}" :sm="{span:10}" :xs="{span:20}">
						<Button type="primary" size="large" @click="showModel">
							<p class="title">
								<Icon type="plus-circled" size="20"></Icon>&nbsp;&nbsp;<span>新增</span>
							</p>
						</Button>
					</Col>
				</div>
			</row>
			<div class="divSearch">
				
				<Row>
					<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
						<label class="searchLabel">所属地区:</label>
						<Cascader :data="AreaList"  change-on-select @on-change='SearchCascaderChange' class="searchInput" style="width:160px;"></Cascader>
					</Col>
					<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
						<label class="searchLabel">用户帐号:</label>
						<Input type="text" v-model="SearchModel.Account" placeholder="请填写" class="searchInput"></Input>
					</Col>
					<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
						<label class="searchLabel">用户姓名:</label>
						<Input type="text" v-model="SearchModel.UserName" placeholder="请填写" class="searchInput"></Input>
					</Col>
					<!-- <Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
						<label class="searchLabel">用户类型:</label>
						<Select v-model="SearchModel.UserType" placeholder="请选择" class="searchInput">
							<Option value="">全部</Option>
							<Option :value="item.DictValue" v-for="item in UserTypeList" :key="item.DictValue">{{item.DictText}}</Option>
						</Select>
					</Col> -->
					<!-- <Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
						<label class="searchLabel">用户状态:</label>
						<Select v-model="SearchModel.Status" placeholder="请选择" class="searchInput">
							<Option value="">全部</Option>
							<Option value="1">启用</Option>
							<Option value="0">停用</Option>
						</Select>
					</Col> -->
					<Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
						<Button icon="ios-search" type="primary" @click="Search()" class="searchButton">查询</Button>
					</Col>
				</Row>
			</div>
			<Row>
				<Col span="24" class="col-margin">
				<Table size="large" :height="clientHeight" border :context="ctxTable" :columns="columnsTableList" :data="datas.rows" no-data-text='暂无数据...'></Table>
				</Col>
			</Row>
			<row>
				<!--分页插件-->
				<Col>
				<Page class="pageComponent" :total="datas.total" show-elevator show-sizer show-total placement="top" :page-size="20" :page-size-opts='pageSizeOpts' @on-change="changePage" @on-page-size-change="changePageSize">
				</Page>
				</Col>
			</row>
		</div>
		<!--用户信息修改-->
		<Modal v-model="ShowModal" :mask-closable="false">
			<p slot="header" class="title">
				<span style="font-size: 20px">用户信息编辑</span>
			</p>
			<Form ref="UserModel" :model="UserModel" :rules="userRule" :label-width="80">
				<table class="userinfo">
					<tr>
						<td><Form-item label="用户帐号" prop="Account">
						<Input v-model="UserModel.Account" placeholder="请输入用户账号"></Input>
					</Form-item></td>
					<td><Form-item label="真实姓名" prop="UserName">
						<Input v-model="UserModel.UserName" placeholder="请输入真实姓名"></Input>
					</Form-item></td>	
					</tr>
					<tr>
						<td><Form-item label="个人电话" prop="Phone">
							<Input v-model="UserModel.Phone" placeholder="请输入联系电话"></Input>
						</Form-item></td>
						<td><Form-item label="所属地区" prop="AreaCode">
						<Cascader :data="AreaList" v-model="UserModel.AreaCodeList" change-on-select @on-change='cascaderChange'></Cascader>
						<Input style="display:none;" v-model="UserModel.AreaCode"></Input>
					</Form-item></td>
					</tr>
					<tr>
						<td><Form-item label="工作单位" prop="UnitName">
						<Input v-model="UserModel.UnitName" placeholder="请输入工作单位"></Input>
					</Form-item></td>
						<td><Form-item label="单位地址" prop="UnitAddress">
						<Input v-model="UserModel.UnitAddress" placeholder="请输入单位地址"></Input>
					</Form-item></td>
					</tr>
					<tr>
						<td><Form-item label="邮箱地址" prop="Email">
						<Input v-model="UserModel.Email" placeholder="请输入邮箱"></Input>
					</Form-item></td>
						<td><Form-item label="QQ号码" prop="QQ">
						<Input v-model="UserModel.QQ" placeholder="请输入QQ号码"></Input>
					</Form-item></td>
					</tr>
					<tr>
						<td><Form-item label="用户状态" prop="Status">
						<Select v-model="UserModel.Status" placeholder="请选择用户状态">
							<Option value="1">启用</Option>
							<Option value="0">禁用</Option>
						</Select>
					</Form-item></td>
						<td><Form-item label="用户类型" prop="UserType">
						<Select v-model="UserModel.UserType" placeholder="请选择用户类型">
							<Option :value="item.DictValue" v-for="item in UserTypeList" :key="item.DictValue">{{item.DictText}}</Option>
						</Select></Form-item>
						</td>
					</tr>
					<tr>
						<td colspan="3"><Form-item label="用户备注" prop="Remark">
						<Input v-model="UserModel.Remark" type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入150字以下"></Input>
					</Form-item></td>
					</tr>
				</table>	
			</Form>
			<div slot="footer">
				<Button @click="cancel('UserModel')">取消</Button>&nbsp;&nbsp;
				<Button type="primary" @click="save('UserModel')">保存</Button>
			</div>
		</Modal>
		<!--用户授权-->
		<Modal v-model="RoleModalType" :mask-closable="false" :closable="false">
			<p slot="header" class="title">
				<Icon type="ios-paper" size="20"></Icon>
				<span style="font-size: 20px">用户授权</span>
			</p>
			<div slot="footer">
				<Button type="primary" @click="roleSave()">确定</Button>
				<Button type="ghost" @click="roleCancel()" style="margin-left: 8px">取消</Button>
			</div>
			<Table size="small" @on-selection-change="selecChange" @on-select-all="selectAll" border :context="ctx" :columns="columnsList" :data="RoleList" no-data-text='暂无数据...'></Table>
		</Modal>
		<!--用户信息展示-->
		<Modal v-model="infoshow" :mask-closable="false" width="800">
			<p slot="header" class="title">
				<Icon type="ios-paper" size="20"></Icon>
				<span style="font-size: 20px">详细信息</span>
			</p>
			<p slot="close">
				<Icon type="close-circled" color="red" size=25></Icon>
			</p>
			<table class="userinfo">
				<tr>
					<th>用户账号</th>
					<td width="220px">{{dataModel.Account}}</td>
					<th>所属地区</th>
					<td>{{dataModel.AreaCode|omgAreaName}}</td>
				</tr>
				<tr>
					<th>真实姓名</th>
					<td>{{dataModel.UserName}}</td>
					<th>QQ号码</th>
					<td>{{dataModel.QQ}}</td>
				</tr>
				<tr>
					<th>账号状态</th>
					<td>{{dataModel.Status|omgConvDict('StatusList')}}</td>
					<th>现任职务</th>
					<td>{{dataModel.PostName}}</td>
				</tr>
				<tr>
					<th>工作单位</th>
					<td>{{dataModel.UninName}}</td>
					<th>单位地址</th>
					<td>{{dataModel.UnitAddress}}</td>
				</tr>
				<tr>
					<th>办公电话</th>
					<td>{{dataModel.TelPhone}}</td>
					<th>联系电话</th>
					<td>{{dataModel.Phone}}</td>
				</tr>
				<tr>
					<th>邮箱地址</th>
					<td>{{dataModel.Email}}</td>
					<th>上次登录</th>
					<td>{{dataModel.LastLoginTime|moment}}</td>
				</tr>
				<tr>
					<th>添加时间</th>
					<td>{{dataModel.AddTime|moment}}</td>
					<th>添加用户</th>
					<td>{{dataModel.AddUser}}</td>
				</tr>
				<tr>
					<th>修改时间</th>
					<td>{{dataModel.UpdateTime|moment}}</td>
					<th>修改用户</th>
					<td>{{dataModel.UpdateUser}}</td>
				</tr>
				<tr>
					<th>备注说明</th>
					<td colspan="3">{{dataModel.Remark}}</td>
				</tr>
			</table>
			<div slot="footer"></div>
		</Modal>
	</div>
</template>
<script>
export default {
	data() {
		const validateAccount = function () {}
		return {
			tableTotal: 0,//表格记录条数
			ShowModal: false,//model开关,针对form填报表格
			RoleModalType: false,
			infoshow:false,
			datas: {},//table数据对象
			dataIds: [],
			RoleList: [],//角色列表
			clientHeight: window.innerHeight - 340,//数据表格的宽度
			AreaList: this.GetlocaStorage("areatreelist"),//所属行政区划数组
			UserTypeList: this.GetGroupDict("UserType"),//用户类型
			pageSizeOpts: [20, 40, 50],
			SearchModel: {
				PageNumber: 1,
				PageSize: 20,
				Account: '',
				UserName: '',
				AreaCode: '',
				UserType: '',
				Status: ''
			},
			UserModel: {//V-model
				Id: 0,
				AreaCodeList: [],
				Account: '',
				AreaCode: '',
				UserName: '',
				Password: '',
				UserType: '',
				Status: '1',
				Sort: '1',
				Phone: '',
				Remark: '',
				Email: '',
				QQ: '',
				UnitName: '', 
				UnitAddress: ''
			},
			dataModel: {//编辑模型
				Id: 0,
				Account: '',
				AreaCode: '',
				AreaCodeList: [],
				UserName: '',
				UserType: '1',
				Status: '1',
				UnitName: '',
				UnitAddress: '',
				PostName: '',
				TelPhone: '',
				Email: '',
				QQ: '',
				Phone: '',
				Sort: '1',
				Remark: ''
			},
			ctx: this,//table数据上下文
			columnsList: [//表头对象
				{ type: 'selection', width: 60, align: 'center' },//多选设置
				{ title: "角色名称", key: "RoleName" },
				{ title: "备注", key: "Remark" }],
			//表单验证规则
			userRule: {//表单验证规则
				Account: [{ required: true, message: '请填写登录名', trigger: 'blur' }],
				UserName: [{ required: true, message: '请填写真实姓名', trigger: 'blur' }],
				UnitName: [{ required: true, message: '请填写真实姓名', trigger: 'blur' }],
				Phone: [{ required: true, message: '请填写电话号码', trigger: 'blur' }],
				Status: [{ required: true, message: '请选择用户状态', trigger: 'change' }],
				// UserType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
				// Email: [{ required: true, message: '请填写邮件地址', trigger: 'blur' }]
			},
			ctxTable: this,
			columnsTableList: [
				{ title: "地区", key: "AreaCodeName", width: 130 },
				{ title: "账号", key: "Account" },
				{ title: "姓名", key: "UserName" },				
				{ title: "电话", key: "Phone" },
				{ title: "工作单位", key: "UnitName" },
				// { title: "上次登录时间", key: "LastLoginTimeString", width: 180 },
				// { title: "状态", key: "StatusName" },
				{
					title: '操作', key: 'action', width: 400, align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								class: {
									ieditColor: true
								},
								props: {
									size: 'small',
									type: 'ghost',
									icon: 'ios-paper-outline'
								}, style: {
									marginRight: '5px'
								}, on: {
									click: () => {
										this.showInfo(params.row.Id)
									}
								}
							}, '详情'),
							h('Button', { class: { ieditColor: true }, props: { type: 'ghost', size: 'small', icon: 'pull-request' }, style: { marginRight: '5px' }, on: { click: () => { this.showRoleModal(params.row.Id) } } }, '授权'),
							h('Button', { class: { irefreshColor: true }, props: { type: 'ghost', size: 'small', icon: 'refresh' }, style: { marginRight: '5px' }, on: { click: () => { this.ResetPwd(params.row.Id) } } }, '重置密码'),
							h('Button', { class: { ieditColor: true }, props: { type: 'ghost', size: 'small', icon: 'ios-compose' }, style: { marginRight: '5px' }, on: { click: () => { this.Edit(params.row.Id) } } }, '编辑'),
							h('Button', { class: { ideleteColor: true }, props: { type: 'ghost', size: 'small', icon: 'ios-trash-outline' }, on: { click: () => { this.Remove(params.row.Id); } } }, '删除')])
					}
				}
			]
		}
	},
	mounted: function () {
		const that = this;
		window.onresize = () => {
			return (() => {
				that.clientHeight = window.innerHeight - 340;
			})()
		};
	},
	methods: {
		//查询方法
		Search() {
			this.initTableData();
		},
		showInfo(id) {
			var self = this;
			this.$http.get("User", { params: { id: id } }).then(//获取数据编辑项的值
				function (res) {
					if (res.data.status == 1) {
						self.dataModel = res.data.model;
						self.infoshow = true;//打开modal
					}
					else {
						self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
					}
				}
			);
		},
		//打开角色列表授权
		showRoleModal(id) {
			this.UserId = id;
			this.RoleModalType = true;
			var self = this;
			self.$http.get('UserRole', { params: { id: this.UserId } }).then(function (res) {
				if (res.data.status === 1) {
					self.RoleList = res.data.model;
				}
				else {
					self.$Modal.error({ title: '提示信息', content: res.data.message });
				}
			});
		},
		//授权保存
		roleSave() {
			var self = this;
			var URModel = new Object();
			URModel.UserId = this.UserId;
			URModel.RoleList = this.getDataIds(this.dataIds);
			self.$http.post('UserRole', URModel).then(function (res) {
				if (res.data.status === 1) {
					self.$Notice.success({ title: '授权成功！', desc: false });
					self.RoleModalType = false;
				}
				else {
					self.$Modal.error({ title: '提示信息', content: res.data.message });
				}
			});
		},
		//获取用户选中角色
		getDataIds(idList) {
			var ids = [];
			if (idList.length !== 0) {
				for (var i = 0; i < idList.length; i++) {
					ids.push({ 'UserId': this.UserId, 'RoleId': idList[i].Id });
				}
			}
			return ids;
		},
		//授权取消
		roleCancel() {
			this.UserId = "";
			this.RoleModalType = false;
		},
		//行政区划级联选择
		cascaderChange(value, selectedData) {
			const index = value.length - 1;
			this.UserModel.AreaCode = value[index];
		},
		//查询行政区划级联选择
		SearchCascaderChange(value, selectedData) {
			const index = value.length - 1;
			this.SearchModel.AreaCode = value[index];
		},
		showModel: function () {
			this.ShowModal = true;//显示对话框      
		},
		ResetPwd: function (ID) {
			var self = this;
			self.$http.get("user/ResetPwd?id=" + ID).then(function (res) {
				if (res.data.status === 1) {
					self.$Modal.success({ title: "提示信息", content: "密码初始化成功!" });
				}
				else {
					self.$Modal.warning({ title: "提示信息", content: "密码初始化失败,请与管理员联系!" });
				}
			});
		},
		save: function (name) {//保存表单
			var self = this;
			self.$refs[name].validate((valid) => {
				if (valid) {
					if (self.UserModel.Id === 0) {
						self.$http.post('User', self.UserModel).then(function (res) {
							if (res.data.status == 1) {
								self.$Modal.success({ title: "提示信息", content: "数据添加成功" });
								self.initTableData();
								self.$refs[name].resetFields();//重置model
								self.ShowModal = false;
							}
							else {
								self.$Modal.warning({ title: "提示信息", content: "数据添加失败,请与管理员联系!" });
							}
						});
					}
					//用户数据编辑	
					else {
						self.$http.put('User', self.UserModel).then(
							function (res) {
								if (res.data.status) {
									self.initTableData();
									self.$Modal.success({ title: "提示信息", content: "数据编辑成功" });
									self.$refs[name].resetFields();//重置model
									self.UserModel = [];
									self.UserModel.Id = 0;
									self.ShowModal = false;
								}
								else {
									self.$Modal.warning({ title: "提示信息", content: "数据编辑失败,请与管理员联系!" });
								}
							});
					}
				}
			});
		},
		cancel: function (name) {//关闭新增对话框
			this.$refs[name].resetFields();//关闭表单校验
			this.ShowModal = false;//关闭对话框
			this.UserModel.AreaCodeList = [];
			this.UserModel.AreaCodes = "";
		},
		//批量删除
		Removes: function (id, index) {//批量删除
			this.$Modal.confirm({
				title: '提示信息',
				content: '<p>数据删除后不可恢复，确定要删除？</p>',
				onOk: () => {
					this.tabledata = [];
					this.$Message.info('数据删除成功');
					this.tableTotal = this.tabledata.length;
				}
			});
		},
		Remove: function (ID) {//删除单条数据
			var self = this;
			self.$Modal.confirm({
				title: '提示信息',
				content: '<p>数据删除后不可恢复，确定要删除？</p>',
				onOk: () => {
					this.$http.delete("User", { params: { id: ID } }).then(
						function (res) {
							if (res.data.status) {
								self.tabledata.splice(index, 1);//移除当前行
								self.initTableData();
								self.$Modal.success({ title: "提示信息", content: "数据删除成功!!!" });
							}
							else {
								self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
							}
						}
					)
				}
			});
		},
		Edit: function (ID) {//编辑数据
			var self = this;
			this.$http.get("User", { params: { id: ID } }).then(
				function (res) {
					if (res.data.status == 1) {
						self.UserModel = res.data.model;
						self.UserModel.AreaCodeList = self.UserModel.AreaCodes.split(",");
						self.showModel();
					}
					else {
						self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
					}
				}
			)

		},
		//checkbox取消选中方法
		selecChange(selection) {
			this.dataIds = selection;
		},
		//全选方法
		selectAll(selection) {
			this.dataIds = selection;
		},
		//checkbox选中方法
		selectSingel(selection, row) {
			this.dataIds = selection;
		},
		initTableData: function () {//初始化数据
			var self = this;
			console.log(self.SearchModel);
			this.$http.post("User/PostPageList", self.SearchModel).then(function (res) {
				if (res.data.status === 1) {
					self.datas = res.data;
				}
				else {
					self.$Modal.error({ title: '提示信息', content: res.data.message });
				}
			})
		},
		changePage: function (pageIndex) {//改变页码事件
			this.SearchModel.PageNumber = pageIndex;
			this.initTableData();
		},
		changePageSize: function (pageSize) {//改变页面记录条数事件
			this.SearchModel.PageSize = pageSize;
			this.initTableData();
		}
	},
	created: function () { //初始化函数
		this.initTableData();
	}
}
</script>